<template>
    <el-row class='listArea'>
        <el-col :span="4" class='listArea_item' style='border-right:1px solid #ddd;overflow:auto'>
           <el-tree
            :props="props"
            :load="loadNode"
            highlight-current
            :default-expanded-keys="expandKeys"
            ref="cityTree"
            lazy
             @node-click="handleNodeClick"
             v-if="showTree"
            >
            <span class="span-ellipsis" slot-scope="{ node,data }">
            <i v-if="data.$treeNodeId==1" class="el-icon-tree"></i>
            <i v-else-if="data.children&&data.children.length>0" class="el-icon-folder"></i>
            <i v-else class="el-icon-file"></i>
                <span :title="node.label" style="padding-left:3px;">{{ node.label }}<span class="treeCount" v-if="data.count" >({{ data.count }})</span></span>
            </span>
            </el-tree>
        </el-col>
        <el-col :span="20" class='listArea_item'>
            <list @countJson="countJson" :commonListData="commonListData" v-if="shows" ref="commonList" @openWin="openWin"></list>
        </el-col>
    </el-row>
</template>
<script>

import List  from './List.vue'
export default {
    components: {
        List
    },
    data(){
        return{
            showTree:false,
            shows:true,
            countDataJson:{},
            currentValue:"",
            pId:"",
            props: {
                label: 'label',
                children: 'children',
                isLeaf: 'leaf'
            },
            expandKeys:[],
            commonListData:{
                sKey:"",
                sKey2:"",
                exId:"",
                company:"",
                searchs:{
                    "province":"",
                    "city":"",
                    "area":"",
                    "stone":"",
                    "village":""
                },
                isApp:"",
                title:"",
                appid:"",
                model:"",
                dbModelkey:"",
                key:"",
                level:"4"
            },
            treeData:null,
            leve2_index:-1,
            isInitTree:"Y"
        }
    },
    created(){
        if(this.$route.query.sKey){
            this.commonListData.sKey=this.$route.query.sKey;
        }
        if(this.$route.query.sKey2){
            this.commonListData.sKey2=this.$route.query.sKey2;
        } 
        if(this.$route.query.exId){
            this.commonListData.exId=this.$route.query.exId;
        } 
        if(this.$route.query.company){
            this.commonListData.company=this.$route.query.company;
        }
        if(this.$route.query.searchs){
            this.commonListData.searchs=this.$route.query.searchs;
        }
        if(this.$route.query.isApp){
            this.commonListData.isApp=this.$route.query.isApp;
        }
        if(this.$route.query.appid){
            this.commonListData.appid=this.$route.query.appid;
        }
        if(this.$route.query.title){
            this.commonListData.title=this.$route.query.title;
        }
        if(this.$route.query.model){
            this.commonListData.model=this.$route.query.model;
        }
        
         if(this.$route.query.dbModelkey){
            this.commonListData.dbModelkey=this.$route.query.dbModelkey;
        }
        if(this.$route.query.key){
            this.commonListData.key=this.$route.query.key;
        }
        //alert(this.$route.query.pId);
        if(this.$route.query.pId){
            this.pId=this.$route.query.pId;
            this.expandKeys.push(this.pId.split("#")[1])
        }
        if(this.$route.query.level){
            this.level=this.$route.query.level;
            this.level="1"
        }
        //this.loadCity();
    },
    methods:{
        loadNode(node, resolve) {
            if (node.level === 0) {
                let pId=this.pId;
                let pIds=pId.split("#");
                pId=pIds.length>1 ? pIds[1]:"";
                console.log(this.level,"level==========================")
                if(pId!="0"){
                    this.$post("business","api/common/getCity",{"pId":pId,"level_source":""+1,level_target:this.level,"isbj":"Y"}).then(data=>{
                   // resolve(data);
                        console.log(data,"cityData=============")
                        console.log(this.countDataJson,"countDataJson=========")
                        data.forEach(item=>{
                            item.name=item.label
                            if(this.countDataJson&&this.countDataJson[item.label]){
                                item.count=this.countDataJson[item.label]
                            }
                        })
                        /*let data_=[{
                            id:"0",
                            name:"",
                            level:"-1",
                            value:"",
                            count:"1",
                            label:"全部"
                        }]*/
                        resolve(data);

                        this.treeData=data;
                        //resolve([{ label: '江苏省',value:"江苏省#320000000000",id:"0",children:data }]);
                       // resolve(data_);
                        this.$nextTick(()=>{
                            
                            let nodeData=node.childNodes[0]
                            console.log(nodeData,"nodeData=====================================")
                            nodeData.expanded = true;
                            nodeData.loadData()
                        })
                    
                    })
                }else{
                    let data_=[{
                        id:"0",
                        name:"",
                        level:"-1",
                        value:"",
                        count:"",
                        label:"全部"
                    }]
                    this.treeData=data_;
                    resolve(data_);
                    this.$nextTick(()=>{
                    
                        let nodeData=node.childNodes[0]
                        nodeData.expanded = true;
                        nodeData.loadData()
                    })
                }
                
               // return resolve();
               
                
            }
            if(node.level>0){
                console.log(node)
                let pId=node.data.value;
                let pIds=pId.split("#");
                pId=pIds.length>1 ? pIds[1]:"";
            
                this.$post("business","api/common/getCity",{"pId":pId,"level_source":""+Number(node.level),level_target:this.level}).then(data=>{
                    //if(node.level==1){
                        
                        let totalCount=0;
                        data.forEach(item=>{
                            item.name=item.label
                            if(this.countDataJson&&this.countDataJson[item.label]){
                                item.count=this.countDataJson[item.label]

                                if(node.level==1){
                                    totalCount+=Number(item.count)
                                }
                            }
                        })
                        if(totalCount>0)
                            this.treeData[0].count=""+totalCount
                        try{
                            if(node.level==1){
                                this.treeData[0].children=data;
                            }else if(node.level==2){
                                this.treeData[0].children.forEach((item,index)=>{
                                    if(item.value==node.data.value){
                                        item.children=data;
                                        this.leve2_index=index;
                                    }
                                })
                            }else if(node.level==3){
                                this.treeData[0].children[this.leve2_index].children.forEach(item=>{
                                    if(item.value==node.data.value){
                                        item.children=data;
                                    }
                                })
                            }
                        }catch(e){}
                        
                    //}
                    resolve(data);
                    
                })
            }
            
        },
        handleNodeClick(data) {
            console.log(data,"click=========");
            let label=data.name;
            if(data.level=="0"){
                this.commonListData.searchs.province=label;
                this.commonListData.searchs.city="";
                this.commonListData.searchs.area="";
                this.commonListData.searchs.stone="";
                this.commonListData.searchs.village="";
            }else if(data.level=="1"){
                this.commonListData.searchs.province="";
                this.commonListData.searchs.city=label;
                this.commonListData.searchs.area="";
                this.commonListData.searchs.stone="";
                this.commonListData.searchs.village="";
            }else if(data.level=="2"){
                this.commonListData.searchs.province="";
                this.commonListData.searchs.city="";
                this.commonListData.searchs.area=label;
                this.commonListData.searchs.stone="";
                this.commonListData.searchs.village="";
            }else if(data.level=="3"){
                this.commonListData.searchs.province="";
                this.commonListData.searchs.city="";
                this.commonListData.searchs.area="";
                this.commonListData.searchs.stone=label;
                this.commonListData.searchs.village="";
            }else if(data.level=="4"){
                this.commonListData.searchs.province="";
                this.commonListData.searchs.city="";
                this.commonListData.searchs.area="";
                this.commonListData.searchs.stone="";
                this.commonListData.searchs.village=label;
            }
            this.isInitTree="N"
            this.$refs.commonList.setComonListSearch(this.commonListData.searchs,"Y");
        },
        countJson(data){
           
            this.countDataJson=JSON.parse(data)
            if(this.showTree){
               
                if(this.isInitTree!="N"){
                    this.showTree=false;
                }
                window.setTimeout(()=>{
                    
                    this.initTreeData()
                },200)
               
                
            }else{
                this.showTree=true;  
            } 
           
            console.log(data,"data================================================");
        },
        initTreeData(){
            if(this.isInitTree=="N"){
                window.setTimeout(()=>{
                    this.isInitTree="Y"
                },2000)
                
                return;
            }
            console.log(this.treeData,"treeData=========="+this.isInitTree)
            
            let totalCount=0;
            this.treeData[0].children.forEach((item,index)=>{
                if(this.countDataJson&&this.countDataJson[item.label]){
                    item.count=this.countDataJson[item.label]
                    totalCount+=Number(this.countDataJson[item.label])
                }else{
                    item.count="";
                }
                console.log(item.label+"+="+item.count)
                this.$set(this.treeData[0].children[index],"count",item.count)
                if(item.children){
                    item.children.forEach((item2,index2)=>{
                        if(this.countDataJson&&this.countDataJson[item2.label]){
                            item2.count=this.countDataJson[item2.label]
                        }else{
                            item2.count="";
                        }

                        this.$set(this.treeData[0].children[index].children[index2],"count",item2.count)
                        if(item2.children){
                            item2.children.forEach((item3,index3)=>{
                                if(this.countDataJson&&this.countDataJson[item3.label]){
                                    item3.count=this.countDataJson[item3.label]
                                }else{
                                    item3.count="";
                                }
                                
                                this.$set(this.treeData[0].children[index].children[index2].children[index3],"count",item3.count)
                            });
                        }

                    })
                }
            })
            if(totalCount>0){
                //this.treeData[0].count=""+totalCount;
                this.$set(this.treeData[0],"count",""+totalCount)
            }else{
                //this.treeData[0].count=""
                this.$set(this.treeData[0],"count","")
            }
            this.showTree=true;
        },
        openWin(data){
            this.$emit("openWin",data)
        }
    }
}
</script>
<style scoped>
    .listArea{
        width:100%;
        height:100%;
    }
    .listArea_item{
        height:100%;
        background:#fff;
    }
    .listArea_item>>>.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
        background-color: rgba(135, 206, 235, 0.5); 
        color: #409eff; 
        font-weight: bold; 
        font-size:16px;
    }
    .el-trees{
        height: 100%;
    }


    
    ::v-deep .el-icon-folder {
    background: url("~@/assets/img/icon/folder3.png") center no-repeat;
    font-size: 16px;
    background-size: cover;
    }
    ::v-deep .el-icon-folder:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
    }
    ::v-deep .el-icon-file {
    background: url("~@/assets/img/icon/file3.png") center no-repeat;
    font-size: 16px;
    background-size: cover;
    }
    ::v-deep .el-icon-file:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
    }
    ::v-deep .el-icon-tree {
    background: url("~@/assets/img/icon/folder3.png") center no-repeat;
    font-size: 16px;
    background-size: cover;
    }
    ::v-deep .el-icon-tree:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
    }
    .treeCount{
        color:red;
    }
</style>